<template>
  <van-tabbar v-model="active" active-color="#DC584D" class="tab-bar">
    <van-tabbar-item @click="handleTo('home', 0)">
      <span>行情</span>
      <template #icon="props">
        <span class="iconfont icon-gupiao-hangqingdianjitai"></span>
      </template>
    </van-tabbar-item>
    <van-tabbar-item icon="chat-o" @click="handleTo('echarts', 1)">
      <span>图表</span>
      <template #icon="props">
        <span class="iconfont icon-kxiantu"></span>
      </template>
    </van-tabbar-item>
    <van-tabbar-item icon="chat-o" @click="handleTo('jiaoyi', 2)">
      <span>交易</span>
      <template #icon="props">
        <span class="iconfont icon-jiaoyijilu"></span>
      </template>
    </van-tabbar-item>
    <van-tabbar-item icon="chat-o" @click="handleTo('lishi', 3)">
      <span>历史</span>
      <template #icon="props">
        <span class="iconfont icon-lishijilu-copy"></span>
      </template>
    </van-tabbar-item>

    <van-tabbar-item icon="chat-o" @click="handleTo('setup', 4)">
      <span>设置</span>
      <template #icon="props">
        <span class="iconfont icon-shezhi1"></span>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { useUserStore } from '@/stores/user'
const router = useRouter()
const userStore = useUserStore()
console.log('🚀 ~  userStore: ', userStore.activeKey)

const props = defineProps({
  title: {
    type: String,
    default: '首页',
    required: false // 是否必传
  },
  left: {
    type: Boolean,
    default: false,
    required: false // 是否必传
  }
})

const active = ref(0)
onMounted(() => {
  active.value = userStore.activeKey
})
// 返回
const handleTo = (val, type) => {
  console.log("🤡 ~ type:", type)
  userStore.setUserInfo(type * 1)
  router.push({ path: val })
}
</script>
<style lang="scss" scoped>
.iconfont {
  font-size: 20px;
}
.tab-bar{
  max-width: 375px;
  margin:0 auto;
  left: 50%;
  transform: translateX(-50%);
}
</style>
